<script setup lang="ts">
import { ref } from 'vue';
import KnowledgeCard from './KnowledgeCard.vue'
import type { KnowledgeList, KnowledgeParams, KnowledgeType } from '@/types/consult';
import { getKnowLedgeListAPI } from '@/apis/consult';
const loading = ref(false);
const finished = ref(false);

//定义 defineProps 接收父组件的数据
const props = defineProps<{
    type: KnowledgeType
}>()

// 请求参数的响应式数据
const params = ref<KnowledgeParams>({
    type: props.type,
    current: 1,
    pageSize: 10
})
const list = ref<KnowledgeList>([])
const onLoad = async () => {
    const res = await getKnowLedgeListAPI(params.value)
    list.value.push(...res.data.rows)
    params.value.current++
    // 加载状态结束
    loading.value = false
    // 什么时候结束 数据加载完了 需要将finished 这个响应式的数据设置为 true
    if (params.value.current > res.data.pageTotal) {
        finished.value = true
    }
}
</script>

<template>
    <div class="knowledge-list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <knowledge-card v-for="item in list" :key="item.id" :item="item"></knowledge-card>
            <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        </van-list>
    </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
    padding: 0 15px;
}
</style>